<template>
  <div>
    <el-container>
      <el-header>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="班级列表">
            <el-select v-model="formInline.grade" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="考试列表">
            <el-select v-model="formInline.testNames" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="科目">
            <el-select v-model="formInline.subject" placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">本科排名分布</el-button>
          </el-form-item>

        </el-form>
      </el-header>

      <el-main> 
        <div id="myChart" :style="{ width: '1000px', height: '600px' }"></div>
      </el-main>

      <el-footer> </el-footer>
    </el-container>
  </div>
</template>

<script>
import echarts from "echarts";
import axios from "axios";
export default {
  data() {
    return {
      options1: [],
      options2: [],
      options3: [],
      value: "",

      tableData: [],
      rank:[],

      formInline: {
        grade: "1",
        testNames: "高一上第一次月考",
        subject: "chinese",
      },
      size: 0,
      total: 0,
      currentPage: 1,
    };
  },

mounted() {
      this.drawLine();
    },
  methods: {
    
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "人数" },
        xAxis: {
          type: "category",
          data: ["0-60", "60-70", "70-80", "80-90", "90-100"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.rank,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });
    },
    onSubmit() {
      axios
        .get("http://localhost:8080/selectStuData4", {
          params: {
            grades: this.formInline.grade,
            testNames: this.formInline.testNames,
            subject: this.formInline.subject,
          },
        })
        .then((resp) => {
          this.rank = eval(resp.data.rank);
          this.drawLine();
          
        });
    },

    ondata() {
      this.$router.push({
        path: "/a",
        name: "数据对比",
        params: {
          grades: this.formInline.grade,
          testNames: this.formInline.testNames,
          subject: this.formInline.subject,
        },
      });
    },

    selectdata() {
      axios
        .get("http://localhost:8080/selectStuData", {
          params: {},
        })
        .then((resp) => {
          console.log(resp.data.gradeclass);
          var tmp1 = eval(resp.data.gradeclass);
          this.options1 = tmp1;
          var tmp2 = eval(resp.data.testName);
          this.options2 = tmp2;
          var tmp3 = eval(resp.data.subject);
          this.options3 = tmp3;
        });
    },
  },
  created() {
    this.selectdata();
  },
};
</script>

<style scoped>
</style>
